<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>   
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
    <%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
    <%
		String base = request.getContextPath();
		request.setAttribute("base", base);
	%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>zMovie</title>
	
	<!-- CSS
  	================================================== -->
	<link rel="stylesheet" href="${base}/resources/css/zerogrid.css">
	<link rel="stylesheet" href="${base}/resources/css/style.css">
	<link rel="stylesheet" href="${base}/resources/css/responsive.css">
	<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  	<script src="${base}/resources/js/jquery.min.js"></script>
  	<script src="//cdn.bootcss.com/jquery/1.12.2/jquery.js"></script>
  	<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrap-body">

<!--////////////////////////////////////Header-->
<header>
	<div class="top-bar">
		<div class="wrap-top zerogrid">
			<div class="row">
				<div class="col-1-2">
					<div class="wrap-col">
						<ul>
							<li class="mail"><p>网站邮箱</p></li>
							<li class="phone"><p>80 88888 7</p></li>
						</ul>
					</div>
				</div>
				<div class="col-1-2">
					<div class="wrap-col f-right">
						<ul>
							<li><select>
								<option value="en" selected>English</option>
								<option value="fe">France</option>
								<option value="ge">Germany</option>
							</select></li>
							<li><p>Language</p></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="wrap-header zerogrid">
		<div class="row">
			<div class="col-1-2">
				<div class="wrap-col">
					<div class="logo"><a href="/"><img src="${base}/resources/images/logo.png"/></a></div>	
				</div>
			</div>
			<div class="col-1-2">
				<div class="wrap-col f-right">
					<form method="get" action="/search" id="search"  >
					  <input name="q" type="text" size="40" placeholder="Search..." />
					  <input type="submit" value="Submit">
					</form>
				</div>
			</div>
		</div>
		<div class="row">
			<div id="menu">
				<nav>
					<div class="wrap-nav">
					   <ul>
						 <li class="active"><a href="index.html">主页</a></li>
						 <li><a href="single.html">恐怖</a></li>
						 <li><a href="single.html">爱情</a></li>
						 <li><a href="single.html">动漫</a></li>
						 <li><a href="single.html">剧情</a></li>
						 <li><a href="single.html">搞笑</a></li>
						 <li><a href="single.html">动作</a></li>
						 <li><a href="contact.html">联系我们</a></li>
					   </ul>
					</div>
				</nav>
			</div>
		</div>
	</div>
</header>
<!--////////////////////////////////////Container-->
		<section id="container">
			<div class="wrap-container zerogrid">
				<div id="main-content" class="col-2-3">
					<div class="wrap-content">
						<article>
							<div class="art-header">
								<div class="col-1-3">
									<div class="wrap-col">
										<img src="${movie.image}" />
<%-- 										<img src="${base}/resources/images/boy7.png" /> --%>
									</div>
								</div>
								<div class="col-2-3">
									<div class="wrap-col">
										<ul>
											<li><p>名字: <a href="#">${movie.movieTitle}</a></p></li>
											<li><p>主演: <a href="#">${movie.actor}</a></p></li>
											<li><p>类型: <a href="#">${movie.movieTitle}</a></p></li>
											<li><p>上映时间: <a href="#">${movie.uploadtime}</a></p></li>
											<li><p>评分: <a href="#">此处从commen中获取</a></p></li>
											<!-- <li><p>Tags: <a href="#">Action</a></p></li> -->
											<li><a class="button bt1" href="${movie.url}">Play</a><a class="button bt1" href="#">Trailer</a></li>
											<li class="star"><a href="#"><img src="${base}/resources/images/star.png" /></a></li>
										</ul>
									</div>
								</div>
								<div class="clear"></div>
							</div>
								
							</div>
						</article>
						<div class="widget wid-related">
							<div class="wid-header">
								<h5>剧情介绍</h5>
							</div>
							<div class="wid-content">
								<div class="row">
									<div class="col-1-3">
										<div class="wrap-col">
											<a href="#"><img src="${movie.image}" /></a>
										</div>
									</div>
									<div >
										<div class="wrap-col">
											<a href="#"><h4>${movie.detail}</h4></a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="widget wid-related">
							<div class="wid-header">
								<h5>评论信息</h5>
								<c:if test="${user.name ne null}">
									<button type="button" data-toggle="modal" data-target="#addComment">添加评论</button>
								</c:if>
							</div>
							<div class="wid-content">
								<div class="row">
									<table width="100%">
										<thead>
											<td width:90%>评论内容</td>
											<td width:5%>评论人</td>
											<td width:5%>评论时间</td>
										</thead>
										<tbody>
											<c:forEach var="contents" items="${comments}">  
												<tr>
													<td>${contents.content}</td>
													<td>${contents.name}</td>
													<td>${contents.time}</td>
												</tr>
											</c:forEach> 
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
<!--  -->
 


<!--////////////////////////////////////Footer-->
		<footer>
			<div class="zerogrid">
				<div class="wrap-footer">
					<div class="row">
						<div class="col-1-4">
							<div class="wrap-col">
								<div class="widget wid-about">
									<div class="wid-header">
										<h5>Welcome</h5>
									</div>
									<div class="logo"><a href="#"><img src="${base}/resources/images/logo.png"/></a></div>
									<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque quod maxime placeat 
										facere possimus nihil impedit quo minus id quod maxime placeat facere possimus. </p>
								</div>
							</div>
						</div>
						<div class="col-1-4">
							<div class="wrap-col">
								<div class="widget wid-meta">
									<div class="wid-header">
										<h5>Links List</h5>
									</div>
									<div class="widget-content">
										<div class="row">
											<ul>
												<li><a href="#">> Lorem ipsum dolor sit </a></li>
												<li><a href="#">> Nullam venenatis lacus a </a></li>
												<li><a href="#">> Morbi ut sapien nec nisl</a></li>
												<li><a href="#">> Integer a enim ac ex.</a></li>
												<li><a href="#">> Sed in nunc non eleifend  </a></li>
												<li><a href="#">> Integer a enim ac ex.</a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-1-4">
							<div class="wrap-col">
								<div class="widget wid-report">
									<div class="wid-header">
										<h5>Report Link</h5>
									</div>
									<div class="wid-content">
										<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
										eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
										At vero eos et accusam et justo duo dolores et ea rebum. Consetetur sadipscing elitr,  
										sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
									</div>
								</div>
							</div>
						</div>
						<div class="col-1-4">
							<div class="wrap-col">
								<div class="widget wid-meta">
									<div class="wid-header">
										<h5>Links List</h5>
									</div>
									<div class="widget-content">
										<div class="row">
											<ul>
												<li><a href="#">> Lorem ipsum dolor sit </a></li>
												<li><a href="#">> Nullam venenatis lacus a </a></li>
												<li><a href="#">> Morbi ut sapien nec nisl</a></li>
												<li><a href="#">> Integer a enim ac ex.</a></li>
												<li><a href="#">> Sed in nunc non eleifend  </a></li>
												<li><a href="#">> Integer a enim ac ex.</a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</footer>
</div>


 <!-- Modal -->
  <div class="modal fade" id="addComment" role="dialog">
    <div class="modal-dialog">
	      <!-- Modal content-->
	      <div class="modal-content">
	        <div class="modal-header">
	          <button type="button" class="close" data-dismiss="modal">&times;</button>
	          <h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span>评论</h4>
	        </div>
	        <div class="modal-body">
	          <form role="form">
	            <div class="form-group">
	              <label for="usrname"><span class="glyphicon glyphicon-user"></span>评论积分</label>
	              <input type="text" class="form-control" id="rating" >
	            </div>
	            <div class="form-group">
	              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span>评论内容</label>
	              <input type="text" class="form-control" id="content">
	            </div>
	            <button type="text"  id ="insertComment" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span>提交</button>
	          </form>
	        </div>
	        <div class="modal-footer">
	          <button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
	        </div>
	      </div>
    </div>
  </div>
  <input type = "hidden" id = "movieId" value ="${movie.movieId}" ></input>
</body>
<script>
$("#insertComment").click(function(){
	var customerId = "${user.customerId}";
	var rating = $('#rating').val();
	var content = $('#content').val();
	var movieId = $('#movieId').val();
	$.ajax({
		type: 'post',
            url: "./insertCommentEvaluate",
            data:{
            	'rating':rating,
            	'content':content,
            	'movieId':movieId,
            	'customerId':customerId
            },
	        success: function(data){
	        	window.location.reload();
	        }
	});
});
	
</script>
</html>